import { getBillStatistics } from '@/services';
import { Button, Card, DatePicker, Grid, Tabs, Toast } from 'antd-mobile';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';
import MChart from './MChart';
import styles from './index.less';
const StatisticsPage = () => {
  const [startTime, setStartTime] = useState(
    dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
  );
  const [endTime, setEndTime] = useState(dayjs().format('YYYY-MM-DD'));
  const [visible, setVisible] = useState(false);
  const [visible2, setVisible2] = useState(false);
  const [type, setType] = useState<number>(1);
  const [data, setData] = useState({});
  const getData = (startTime: string, endTime: string, type: number) => {
    getBillStatistics({
      startTime,
      endTime,
      type,
    }).then((res) => {
      if (res.code === 1) {
        setData(res.data);
      }
    });
  };
  useEffect(() => {
    if (startTime && endTime && type) {
      getData(startTime, endTime, type);
    }
  }, [startTime, endTime, type]);
  return (
    <div className={styles.content}>
      <Card style={{ width: '100%', fontSize: '1rem' }}>
        <Grid columns={2} gap={1}>
          <Grid.Item>
            开始：
            <Button
              onClick={() => {
                setVisible(true);
              }}
            >
              {startTime}
            </Button>
            <DatePicker
              visible={visible}
              onClose={() => {
                setVisible(false);
              }}
              precision="day"
              onConfirm={(val) => {
                if (dayjs(val).isBefore(dayjs(endTime))) {
                  setStartTime(dayjs(val).format('YYYY-MM-DD'));
                  setVisible(false);
                } else {
                  Toast.show({
                    icon: 'fail',
                    content: '开始日期要小于结束日期',
                  });
                }
              }}
            />
          </Grid.Item>
          <Grid.Item>
            结束：
            <Button
              onClick={() => {
                setVisible2(true);
              }}
            >
              {endTime}
            </Button>
            <DatePicker
              visible={visible2}
              onClose={() => {
                setVisible(false);
              }}
              precision="day"
              onConfirm={(val) => {
                if (dayjs(val).isAfter(dayjs(startTime))) {
                  setEndTime(dayjs(val).format('YYYY-MM-DD'));
                  setVisible2(false);
                } else {
                  Toast.show({
                    icon: 'fail',
                    content: '结束日期要小于开始日期',
                  });
                }
              }}
            />
          </Grid.Item>
        </Grid>
      </Card>
      <Card style={{ width: '100%', marginTop: '10px' }}>
        <Tabs
          onChange={(key) => {
            setType(Number(key));
          }}
        >
          <Tabs.Tab title="收入" key={1}>
            {data ? <MChart type={type} data={data} startTime={startTime} endTime={endTime}></MChart> : null}
          </Tabs.Tab>
          <Tabs.Tab title="支出" key={2}>
            {data ? <MChart type={type} data={data} startTime={startTime} endTime={endTime}></MChart> : null}
          </Tabs.Tab>
        </Tabs>
      </Card>
    </div>
  );
};

export default StatisticsPage;
